<template>
  <div class="visitList">
    <!-- 客户列表信息 -->
    <!-- 书写标题头 -->
    <div class="cust_tit">
      <img :src="img1" alt="" @click="fanhui" />
      <span>新增客户信息</span>
      <img :src="img2" alt="" />
    </div>
    <!-- 书写搜索框 -->
    <van-search
      v-model="CustValue"
      show-action
      placeholder="快递单号"
      @search="onSearch"
    >
      <template #action>
        <div>搜索</div>
      </template>
    </van-search>
    <!-- 客户列表 -->
    <ul>
      <li
        v-for="(item, index) in visitlist"
        :key="index"
        @click="canshu({ id: item.id, name: item.custName })"
      >
        <div>
          <img :src="img3" alt="" />
        </div>
        <h3>{{ item.custName }}</h3>
        <span>&gt;</span>
      </li>
    </ul>
  </div>
</template>

<script>
import { GetCustList } from "@/request/api";
export default {
  data() {
    return {
      img1: require("@/assets/返回.png"),
      img2: require("@/assets/首页按钮.png"),
      img3: require("@/assets/touxiangnan.png"),

      CustValue: "",

      visitlist: [],
    };
  },
  created() {
    GetCustList({
      keyword: this.CustValue,
      current: 1,
      size: 8,
    }).then((res) => {
      console.log(res.data);
      this.visitlist = res.data.records;
    });
  },
  methods: {
    fanhui() {
      this.$router.go(-1);
    },
    onSearch() {
      GetCustList({
        keyword: this.CustValue,
        current: 1,
        size: 8,
      }).then((res) => {
        // console.log(res.data);
        this.visitlist = res.data.records;
      });
    },
    canshu(val) {
      this.$router.push({
        path: "/visit/visitadd",
        query: { id: val.id, name: val.name },
      });
    },
  },
};
</script>
 
<style lang = "less" scoped>
.visitList {
  min-height: 100%;
  width: 100%;
  background-color: #efefef;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 6;
  /* 头部样式 */
  .cust_tit {
    padding: 0.3rem 0.2rem 0.1rem;
    background-color: #003399;
    color: white;
    font-size: 0.18rem;
    display: flex;
    justify-content: space-between;
    img {
      width: 0.2rem;
      height: 0.2rem;
    }
  }
  ul {
    margin-top: 0.1rem;
    li {
      display: flex;
      justify-content: space-between;
      padding: 0.1rem 0.2rem;
      box-sizing: border-box;
      background-color: white;
      line-height: 0.5rem;
      font-size: 0.16rem;
      border-bottom: 1px solid #ccc;
      div {
        height: 0.5rem;
        width: 0.5rem;
        img {
          width: 100%;
        }
      }
      h3 {
        flex: 1;
        margin-left: 0.15rem;
      }
    }
  }
}
</style>